
import { Modal} from 'antd';
import React, { useState, useRef } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table';
import { ProductOrderTableListItem } from './data';
import orderproductList from '../../func/productorder_list';


export interface OrderProductProps {
  onCancel: (flag?: boolean) => void;
  orderproductModalVisible: boolean;
  orderkey:string;
}


const OrderProductForm: React.FC<OrderProductProps> = (props) => {
  const actionRef = useRef<ActionType>();
  const order_key = props.orderkey;
  const columns: ProColumns<ProductOrderTableListItem>[] = [
    {
      title: "品号",
      dataIndex: 'product_number',
      valueType: 'text',
    },
    {
      title: "品名",
      dataIndex: 'product_name',
      valueType: 'text',
    },
    {
      title: "数量",
      dataIndex: 'product_sum',
      valueType: 'text',
    },
        ];
  return (
    <Modal
      width={1040}
      bodyStyle={{ padding: '32px 40px 48px' }}
      destroyOnClose
      title={"创建发布"}
      visible={props.orderproductModalVisible}
      onCancel={() => props.onCancel()}
      onOk={() => props.onCancel()}
    >
    <PageContainer>
      <ProTable<ProductOrderTableListItem>
        headerTitle={"订单详情"}
        actionRef={actionRef}
        rowKey="key"
        search={false}
        request={(params, sorter, filter) => orderproductList({ ...params, sorter, filter, order_key })}
        columns={columns}
      />
    </PageContainer>
    </Modal>
  )
}

export default OrderProductForm